<template>
	<div class="payment">
		<div class="cart-header">
			<div class="cart-header-wrap">
				<div class="cart-title-box">
					<div class="cart-title">支付中心</div>
				</div>
			</div>
		</div>
		<div class="card-content">
			<div class="card-head">
				<div class="course-title">订单：{{new Date().getTime() }}</div>
			</div>
			<div class="card-list">
				<div class="card-item" v-for="item in shopList" :key="item.cartId">
					<div class="course-con">
						<div class="course">
							<img :src="baseUrl+item.imageUrl" alt="" class="course-img">
							<div class="details">
								<div class="course-name">{{ item.title }}</div>
							</div>
						</div>
					</div>
					<div class="price">实付金额: <span>￥{{ item.price }}</span></div>
				</div>
			</div>
			<div class="payment-type">
				<div class="payment-head">支付方式</div>
				<div class="payment-list">
					<div class="payment-item" :class="[payType == '48' ? 'active' : '']" @click="handlePayClick('48')">
						<img src="@/assets/images/icons/icon-alipay.png" alt="支付宝支付">
					</div>
					<div class="payment-item" :class="[payType == '47' ? 'active' : '']" @click="handlePayClick('47')">
						<img src="@/assets/images/icons/icon-wx.png" alt="微信支付">
					</div>
				</div>
			</div>
			<div class="card-total-wrap">
				<div class="pay-count">
					<div class="price-label">应付金额: </div>
					<div class="card-price">￥{{ total }}</div>
				</div>
				<div class="submit-order">
					<el-button type="danger" @click="handlePayment()">立即支付</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import user from '@/store/modules/user'
import { addOrder, addCourseBuy } from '@/api/web/index'
export default {
	name: 'Order',
	data() { 
		return {
			baseUrl: process.env.VUE_APP_BASE_API,
			//商品列表
			shopList: [],
			//总金额
			total: 0,
			ids: '',
			payType: '48', //47微信支付，48 支付宝支付
		}
	},
	mounted() { 
		this.queryOrderShopList();
	},
	methods: {
		/**
		 * 获取订单商品列表
		 */
		queryOrderShopList() { 
			this.shopList = JSON.parse(localStorage.getItem('shopList'));
			this.total = localStorage.getItem('shopTotal');
			let ids = '';
			this.shopList.forEach(item => { 
				ids += item.courseId + ','
			})
			this.ids = ids.slice(0, ids.length - 1);
		},
		/**
		 * 支付
		 */
		async handlePayment() { 
			let res = await addOrder({
				courseId: this.ids,
				buyerId: user.state.id,
				orderAmount: this.total,
				paymentMethod: this.payType
			});
			if (res.code == 200) {
				this.addToCourse();
			} else { 
				this.$message({
					message: '订单提交失败',
					type: 'error'
				});
			}
		},
		/**
		 * 加入购买课程
		 */
		async addToCourse() { 
			let res = await addCourseBuy({
				userId: user.state.id,
				courseId: this.ids,
			})
			if (res.code == 200) {
				this.$router.push('/personal');
			} else { 
				this.$message({
					message: '加入课程失败',
					type: 'error'
				});
			}
		},
		/**
		 * 支付方式
		 * @param val 
		 */
		handlePayClick(val) { 
			this.payType = val;
		}
	}
}
</script>

<style lang="scss" scoped>
.payment {
	width: 100%;
	.cart-header {
		width: 100%;
		height: 160px;
		background-image: url('~@/assets/images/cart-header-bg.jpg');
		.cart-header-wrap {
			display: flex;
			width: 1230px;
			height: 100%;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 auto;
		}
		.cart-title-box {
			display: flex;
			color: #07111b;
			flex-direction: row;
			height: 115px;
			.cart-title {
				font-size: 32px;
				line-height: 115px;
				margin-right: 25px;
				font-weight: 200;
			}
			.cart-count {
				line-height: 115px;
			}
		}
		.order {
			line-height: 115px;
			color: #5e5e5e;
			font-weight: 200;
			cursor: pointer;
		}
	}
	.card-content {
		width: 1230px;
		padding: 0 36px 32px;
		background-color: #fff;
		margin: -40px auto 0 auto;
		box-shadow: 0 8px 16px 0 rgba(7, 17, 27, .1);
		border-radius: 8px;
		.card-head {
			width: 100%;
			height: 70px;
			display: flex;
			flex-direction: row;
			align-items: center;
			border-bottom: 1px solid #dcdfe6;
			color: #5e5e5e;
		}
		.card-list {
			width: 100%;
			padding: 15px 0;
			color: #5e5e5e;
			.card-item {
				width: 100%;
				display: flex;
				flex-direction: row;
				padding: 20px 0;
				align-items: center;
				background-color: #f3f5f7;
				margin-bottom: 15px;
				.course {
					display: flex;
					flex-direction: row;
					align-items: center;
				}
				.course-con {
					flex: 1;
					padding-left: 20px;
					.course-name {
						font-size: 16px;
						color: #07111b;
						padding-left: 20px;
					}
				}
				.price {
					width: 160px;
					color: #93999f;
					text-align: center;
					font-size: 14px;
					> span {
						color: #f01414;
						font-size: 16px;
					}
				}
				.course-img {
					width: 160px;
					height: 90px;
				}
			}
		}
		.payment-type {
			border-top: 1px solid #dcdfe6;
			padding: 20px 0;
			.payment-head {
				line-height: 45px;
				font-size: 16px;
				color: #07111b;
			}
			.payment-list {
				width: 100%;
				display: flex;
				flex-direction: row;
				padding: 10px 0 20px 0;
				.payment-item {
					margin-right: 30px;
					background-color: #f3f5f7;
					padding: 15px 20px;
					border-radius: 5px;
					cursor: pointer;
					border: 2px solid #f3f5f7;
					&.active {
						border-color: #f01414;
					}
				}
			}
		}
		.card-total-wrap {
			width: 100%;
			display: flex;
			border-top: 1px solid #dcdfe6;
			flex-direction: column;
			align-items: flex-end;
			.pay-count {
				display: flex;
				flex-direction: row;
				padding: 15px 0;
				.price-label {
					margin-right: 15px;
				}
				.card-price {
					font-size: 16px;
					color: #F01414;
					font-weight: 600;
				}
			}
		}
	}
}
</style>